<template>
	<view class="list">
		<view class="top">
			<view class="title">请选择服务时间</view>
			<u-tabs
				inactive-color="#999999"
				active-color="#3AB54A"
				bg-color="#F5F5F5"
				height="74"
				:list="cates"
				:duration="0.2"
				:current="current"
				:is-scroll="false"
				@change="change"
			></u-tabs>
		</view>
		<view class="time_bg" v-if="timeArr">
			<block v-for="item in timeArr" :key="item">
				<view class="item no" v-if="cant(item)">
					<text>{{ item }}</text>
					<text class="text">不可预约</text>
				</view>
				<view class="item sel" v-else-if="selected == cates[current].time + ' ' + item">
					<text>{{ item }}</text>
					<text class="text">可预约</text>
				</view>
				<view class="item" v-else @tap="select(item)">
					<text>{{ item }}</text>
					<text class="text">可预约</text>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		agent: {
			type: Array,
			default: () => {}
		},
		shifu: {
			type: Array,
			default: () => {}
		}
	},
	data() {
		return {
			nowDay: "",
			nowTime: "",
			cates: [],
			timeArr: [],
			current: 0,
			selected: ""
		}
	},
	created() {
		this.nowDay = vk.pubfn.timeFormat(new Date(), "yyyy-MM-dd")
		this.nowTime = vk.pubfn.timeFormat(new Date(), "hh:mm")
		this.agent.map(v => {
			let str = v.day.substring(5)
			let obj = { name: str, time: v.day }
			if (v.day == this.nowDay) obj = { name: "今天", time: v.day }
			this.cates.push(obj)
		})
		this.timeArr = this.agent[0].times
	},
	methods: {
		// 不可预约
		cant(item) {
			let now = this.cates[this.current].time
			if (now == this.nowDay && item <= this.nowTime) return true
			if (this.shifu.length == 0) return false
			let obj = vk.pubfn.getListItem(this.shifu, "day", now)
			if (!obj) return false
			if (obj.times.indexOf(item) !== -1) return true
			return false
		},
		// 切换日期
		change(e) {
			this.current = e
			this.timeArr = this.agent[e].times
		},
		// 选择日期
		select(item) {
			let now = this.cates[this.current]
			this.selected = now.time + " " + item
			this.$emit("select", this.selected)
		}
	}
}
</script>

<style lang="scss" scoped>
.list {
	padding-top: 166rpx;
}

.top {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
}

.title {
	font-size: 30rpx;
	font-weight: bold;
	text-align: center;
	padding: 30rpx 0 26rpx;
	background-color: #fff;
}

.time_bg {
	display: flex;
	flex-wrap: wrap;
	padding: 14rpx 1.2%;
}
.item {
	width: 21%;
	margin: 14rpx 2%;
	border-radius: 12rpx;
	background-color: #f5f5f5;
	padding: 12rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 30rpx;
	.text {
		padding-top: 6rpx;
		font-size: 24rpx;
	}
}
.no {
	color: #999999;
}
.sel {
	background-color: #3ab54a;
	color: #fff;
}
</style>
